<template>
    <div class="wrapper customer-box" >
        <el-form ref="customer" label-position="top" :inline="true" :model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="监控状态:">
                        <el-select v-model="filter.type" size="small">
                            <el-option label="正在监控" value="SELECTION"></el-option>
                            <el-option label="停止监控" value="SELECTION"></el-option>

                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="任务名称:">
                        <el-input placeholder="任务名称" v-model="filter.title" size="small"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="getCustomers" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row>
            <el-button size="small" icon="el-icon-plus" @click="addCustomer">添加任务</el-button>
            <el-button size="small" @click="refresh"><i class="fa fa-refresh"></i> 刷新</el-button>
            
            
        </el-row>

        <el-row class="customer_row">
            <!-- class="hidden-table-cell"  用于cell单行显示-->
            <el-table :data="customerList" v-model="customerList" style="width: 100%;" :default-sort = "{prop: 'gmtcreate', order: 'desc'}"
                      @selection-change="handleSelectionChange"
                       highlight-current-row 
                      >
                 <el-table-column type="selection" width="55" className="asd">
                </el-table-column>
                <el-table-column prop="title" label="任务名称" className="asds" min-width="200"　align="center" >
                    <template scope="scope" >
                        <div class="customer_col" >
                            <span @click="handleToDetail(scope.row)"  >
                                {{ scope.row.title}}
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <!--:render-header="renderHeader"-->
                <el-table-column  prop="type" label="类型"  min-width='117' align="center" className="asds">
                	<template scope="scope">
                            <span>{{scope.row.type | formType}}</span>
                    </template>
                </el-table-column> 
                <el-table-column prop="contractProperty" label="状态" align="center" min-width="80" className="asds">
                	
                </el-table-column>
                
                <el-table-column prop="surfacePlot" label="最近采集量" align="center" min-width='110' className="asds">
                	<template scope="scope" >
                        <div class="customer_num" >
                            <span @click="handleToVideo(scope.row)"  >
                                {{ scope.row.viewAddress}}
                            </span>
                        </div>
                    </template>
                </el-table-column>
                
                <el-table-column label="最近采集时间"  prop="gmtCreate"  min-width="179" align="center" className="asds" :render-header="renderHeader">
                    <template scope="scope">
                            <span>{{scope.row.gmtCreate | formatUpdateTime}}</span>
                    </template>
                </el-table-column>


                <el-table-column prop="createUserName" label="创建人" align="center" min-width='140' className="asds"></el-table-column> 
                <el-table-column label="创建时间"  prop="gmtCreate"  min-width="179" align="center" className="asds" :render-header="renderHeader">
                	<template scope="scope">
                            <span>{{scope.row.gmtCreate | formatUpdateTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="modifyUserName" label="执行次数" align="center" min-width='95' className="asds"></el-table-column> 
                <el-table-column prop="action" label="操作" fixed="right" align="center" min-width="280" className="asds">
                    <template scope="scope">
                        <div class="operator-btn">
                            <el-button type="primary" icon="el-icon-caret-right" size="mini" @click="stopBox(scope.row)" >立即执行
                            </el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="transDialog(scope.row)">删除
                            </el-button>
                            <el-button type="primary" icon="el-icon-document" size="mini" @click="cancelhideBox(scope.row)">修改
                            </el-button>
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="openBox(scope.row)" >详情
                            </el-button>
                            
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-row class="paging">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="pagingData.pageNum"
                    :page-sizes="pagingData.pageSizes"
                    :page-size="filter.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingData.total">
            </el-pagination> 
        </el-row>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {Row, Col, Form, FormItem, Tooltip, Input, Select, Option, DatePicker, ButtonGroup, Tree,
            Button, Table, TableColumn, Checkbox, CheckboxGroup, Message, MessageBox, Pagination, Dialog
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import {getDate , returnDate,getArraySub , getLevelName, validTel, setToken, getCookie ,uniqueArr} from '../../utils/auth'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Pagination);
    Vue.use(Tooltip);
    Vue.use(Dialog);
    Vue.use(Tree);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    
    export default {
        head(){
            return {
                title: this.title
            }
        },
        data () {
            return {
            	GmtCreate: [],    //创建时间
                title: '任务列表',
                tabName: '任务列表',
                index: 'index',
                filter: { 
                    title: '',   //标题
                   
                    type:'',//类别
                    pageSize: 50, // 每页条数
                    pageNum: 1,
                    orderModify:"DESCENDING",
                    orderCreate:""
                },
                multipleSelection: [],      // checkbox选中客户列表数据 
                pagingData: {
                    pageSizes: [10, 20, 50],	// 每页可选条数列表,
                    total: 0,
                    pageNum: 1,
                    pageSize: 50
                },
                customerList:[],
                sortOrder: true,
            }
        },
        computed : {
            ...mapGetters([ ])
        },
		filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,true);
            },
            formType(type) {
            	if(type = "SELECTION"){
            		return "精选好课"
            	}else{
            		return ""
            	}
            }
        },
        methods: {
			renderHeader(h, { column, $index }){
                switch ($index) {
                    case 5:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('orderCreate') }>最近采集时间&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    case 7:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData2('orderModify') }>创建时间&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                }
            },
            sortData(type) {
                this.filter.orderCreate = this.orderCreate == true ? 'DESCENDING':'ASCENDING';
				this.filter.orderModify = "";
                this.orderCreate = !this.orderCreate;
                this.getCustomers();
            },
			sortData2(type) {
				this.filter.orderCreate = "";
                this.filter.orderModify = this.orderModify == true ? 'DESCENDING':'ASCENDING';
                this.orderModify = !this.orderModify;
                this.getCustomers();
            },
            // 获取客户列表
            getCustomers () {
                this.$store.dispatch('formManList', this.filter)
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.code == 0 && result.data.list) {
                            this.customerList = result.data.list;
                            this.pagingData.total = result.data.total;
                            this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                            for (var i =0;i<result.data.list.length;i++){
                            	if( this.customerList[i].contractProperty == "PROBATION"){
                            		this.customerList[i].contractProperty = "所有可看";
                            	}else if(this.customerList[i].contractProperty == "OFFICIAL"){
                            		this.customerList[i].contractProperty = "仅限正式会员";
                            	}
                            }
                        }
                        else if(result.data = null){
                        	this.pagingData.total = 0;
                            this.pagingData.pageNum = 0;
                        }
                        else{
                            this.customerList = [];
                            this.pagingData.total = 0;
                            this.pagingData.pageNum = 0;
                        }
                  })
            },
            // 客户列表多选
            handleSelectionChange(val) {
                let ids = [];
                for (let i = 0; i < val.length; i++) {
                    ids.push(val[i].id);
                }
                this.multipleSelection = ids;
            },
			
            empty () {
                let pageSize = this.filter.pageSize;
                let pageNum = this.filter.pageNum;
                this.filter = {
                    title: '',   //客户名称
                    contractProperty: '',   //KP标识
                    type: '',//类别
                    pageSize: pageSize, // 每页条数
                    pageNum: pageNum,
                    orderModify:"DESCENDING",
                    orderCreate:""
                }; 
            }, 
            addCustomer () {
                this.$router.push({path: '/task/addTask'});
            }, 
            
            // 删除资讯弹窗
            transDialog () {
                if (this.multipleSelection == '') {
                    this.$message.error('请先选择资讯');
                    return;
                }
                this.$confirm('确认删除资讯吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteCustomer();
            })
            .catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            },
            // 删除资讯
            deleteCustomer () {
                if (this.multipleSelection == '') {
                    this.$message.error('请先选择资讯');
                    return;
                }
                let ids = this.multipleSelection.join(',');

                this.$store.dispatch('deleteFormManlist', {ids: ids})
                        .then((response) => {
                            if(!response){return}
                    let result = response.data;
                if (result.code === 0) {
                    Message.success('删除成功');
                    this.getCustomers();
                } else {
                    Message.error(result.message);
                }
            })
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                this.getCustomers(this.filter);
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                this.filter.pageNum = 1;
                this.getCustomers(this.filter);
            },
            refresh() {
                window.location.reload();
            }, 
            //跳转到资讯详情页
            handleToDetail(row) {
				this.$router.push({path: '/b2cAdmin/FormDet?id=' + row.id})
            },
           handleToVideo(row) {
                this.$router.push({path: '/b2cAdmin/FormDet?id=' + row.id})
           	   
           },
           cancelhideBox(row){
                this.$router.push({path: '/b2cAdmin/FormDet?id=' + row.id})
           },
           openBox(row){
                this.$router.push({path: '/b2cAdmin/FormDet?id=' + row.id})
           },
           stopBox(row) {
                MessageBox.confirm('确认　暂停：　' + row.brandName + '吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.stopCustomer(row.id);
                    })
                    .catch(() => {
                        Message.info({
                            message: '已取消暂停'
                        });
                    });
            },
            // 删除品牌
            deleteCustomer(id) {
                this.$store.dispatch('deleteBrand', {
                        brandId: id
                    })
                    .then((response) => {
                        if(!response) {
                            return
                        }
                        var result = response.data;
                        if(result.successed && result.successed == true) {
                            this.getCustomers({
                                pageNum: 1,
                                pageSize: 10
                            });
                            this.getBrandList();
                            if(result.code == 103) {

                            } else {
                                Message.success({
                                    message: '删除成功'
                                });
                            }

                        } else {
                            Message.error({
                                message: '删除失败'
                            })
                        }
                    })
            },
            //暂停品牌
            stopCustomer(id) {
                this.$store.dispatch('updateBrandStatus', {
                        brandId: id,
                        updateType: 2
                    })
                    .then((response) => {
                        if(!response) {
                            return
                        }
                        var result = response.data;
                        if(result.successed && result.successed == true) {
                            this.getCustomers({
                                pageNum: 1,
                                pageSize: 10
                            });
                            if(result.code == 103) {

                            } else {
                                Message.success({
                                    message: '暂停成功'
                                });
                            }

                        } else {
                            Message.error({
                                message: '暂停失败'
                            })
                        }
                    })
            },


        },
        computed: {
                ...mapGetters({
                    'pageTabsList': 'getPageTabsList',
                })
        },
        created(){ 
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        },
        mounted(){
            this.getCustomers();
        }
    }

</script>

<style lang="scss">
html,body{
    height: 100%;
}
    .customer-box{
       .el-button--mini{
        padding:5px;
        margin:5px;
       }
        .one{
            color:red!important;
        }
    	.linked{
    		width: 100px;
    	}
    	.el-table .asds>div{
    		padding: 0px;
    	}
        .operator-btn{
            .el-button + .el-button{
                margin-left:0;
            }
        }
        .el-form {
	        .el-form-item {
	            width: 70%
	        }
	        .operator-btn{
	            text-align:center;
	            padding:0 10px;
	        }
	        .el-input, .el-select, .el-cascader, .el-date-picker {
	            width: 100%
	        }
        }
        .action_col {
            position: relative
        }
        .customer_row {
            margin-top: 20px;
            background-color: #ff0000;
        }
        .paging {
            margin-top: 15px;
        }
	    .customer_col {
            cursor: pointer;
		    span {
		        display: block;
				color: #20a0ff;
                word-break: normal;
		        img {
		            margin-right: 5px;
		            cursor: pointer
		        }
		    }
		    span.active {
                color: #48576a;
            }
	    }
        .customer_num{
            cursor: pointer;
            span {
                display: block;
                color: #20a0ff;
                word-break: normal;
                img {
                    margin-right: 5px;
                    cursor: pointer
                }
            }
            span.active {
                color: #48576a;
            }
        }
        tbody {
            font-size: 12px;
        }

        // .active {
        //     display: none;
        // }

        .signRow {
            background-color: #00ee00;
        }

        .trans_button_col {
            text-align: center;
            margin-top: 15px
        }
        .top_close{
            float: left;
            margin-left: 20px;
            margin-top: 20px;
        }
        .top_close, .top_save{
            margin: 0 20px;
        }
        .top_save {
            float: right;
        }
    }
</style>